<template>
    <div class="profile">
        <div>
            <h2>个人信息</h2>
            <form>
                <table>
                    <tbody>
                        <tr>
                            <td>
                                *姓名
                            </td>
                            <td>
                                <input type="text" readonly value="李华">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                *编号
                            </td>
                            <td>
                                <input type="text" readonly value="12343434">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                *性别
                            </td>
                            <td>
                                <input type="radio" name="age" value="男" id="man" checked><label for="man">男</label>
                                <input type="radio" name="age" value="女" id="woman"><label for="woman">女</label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                *手机号
                            </td>
                            <td>
                                <input type="text" value="187****8789">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                *学校
                            </td>
                            <td>
                                <input type="text" value="武汉软件工程职业学院">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                *专业
                            </td>
                            <td>
                                <input type="text" value="软件技术">
                            </td>
                        </tr>
                        <tr>
                            <td>*人员属性</td>
                            <td>
                                <input type="button" value="群众" disabled>
                                <input type="button" value="团员">
                                <input type="button" value="党员">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
            <input type="button" value="提交">
        </div>
    </div>
</template>

<script setup>

</script>

<style scoped>
#app>.profile {
    width: 96vw;
    height: 96vh;
    padding: 2vh 2vw;
    background-color: rgb(245, 245, 245);
}

.profile>div {
    width: 92vw;
    height: 70vh;
    padding: 2vh 2vw;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.profile>div h2 {
    width: 100%;
    font-size: 20px;
    text-indent: 2vw;
}

.profile>div form{
    width: 100%;
}

.profile table {
    border-collapse: collapse;
    width: 95%;
    margin: 0 auto;
}

.profile tr {
    display: flex;
}

.profile tr td:nth-child(1) {
    flex: 1;
}

.profile tr td:nth-child(2) {
    flex: 3;
}

.profile td {
    height: 8vh;
    border-bottom: 1px solid rgb(182, 182, 182);
    font-size: 18px;
    display: flex;
    align-items: center;
}

.profile td input[type="text"] {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-size: 18px;
}

.profile td input[type="radio"] {
    margin-right: 1vw;
}

.profile td input[type="radio"]+label {
    margin-right: 3vw;
}

.profile td input[type="button"]{
    border: none;
    border-radius: 10px;
    padding: 0.5vh 3vw;
    background-color: rgb(235, 235, 235);
    margin-right: 3vw;
}

.profile input[value="提交"]{
    width: 80vw;
    height: 5vh;
    font-size: 18px;
    margin-top: 1vh;
    border: none;
    border-radius: 10px;
    background-color: rgb(121, 41, 41);
    color: white;
}


</style>